<template>
  <div>
    <div class="q-text qu-dynamicFontSize--regular qu-display--flex qu-px--large qu-flexDirection--row" width="1072"
      style="width: 1072px; margin-left: auto; margin-right: auto;box-sizing: initial;">
      <div class="q-box" width="856" id="mainContent" style="width: 856px">
        <div
          class="q-box qu-borderAll qu-borderRadius--small qu-borderTopRightRadius--small qu-borderTopLeftRadius--small qu-borderBottomRightRadius--small qu-borderBottomLeftRadius--small qu-borderColor--raised qu-boxShadow--small qu-bg--raised">
          <div class="q-flex qu-px--medium qu-pt--small qu-justifyContent--space-between qu-alignItems--center">
            <div
              class="q-text qu-dynamicFontSize--large qu-lineHeight--regular qu-fontWeight--bold qu-color--gray_dark_dim qu-passColorToLinks qu-wordBreak--break-word">
              <span><span class="c1tjc3o4">Your Spaces</span></span>
            </div>
            <div class="q-flex qu-alignItems--center qu-mr--n_tiny">
              <div class="q-inlineFlex qu-alignItems--flex-end i1k9lguw">
                <div class="q-box">
                  <div class="q-relative puppeteer_popper_reference" style="position: relative">
                    <button
                      class="q-click-wrapper b10gcu9l bobc9nh b1cg7ppz c1nud10e qu-active--bg--darken qu-borderRadius--pill qu-alignItems--center qu-justifyContent--center qu-whiteSpace--nowrap qu-userSelect--none qu-display--inline-flex qu-tapHighlight--white qu-textAlign--center qu-cursor--pointer qu-hover--bg--darken"
                      height="30" role="button" aria-haspopup="menu" aria-expanded="false" tabindex="0" style="
                        font: inherit;
                        padding: 0px 10px;
                        transition-property: box-shadow, background-color;
                        transition-duration: 60ms;
                        transition-timing-function: ease-out;
                        height: 30px;
                        min-width: 30px;
                        position: relative;
                        border-width: 0px;
                        outline: none;
                        color: inherit;
                        background-color: transparent;
                      ">
                      <div class="q-flex qu-alignItems--center qu-justifyContent--center" style="
                          max-width: 100%;
                          transition-property: opacity;
                          transition-duration: 60ms;
                          transition-timing-function: ease-in-out;
                        ">
                        <div
                          class="q-text qu-display--inline-flex qu-alignItems--center qu-overflow--hidden puppeteer_test_button_text qu-medium qu-color--gray qu-ellipsis"
                          style="font-size: 13px">
                          <div class="q-text qu-ellipsis qu-whiteSpace--nowrap" style="line-height: normal">
                            Recently Visited
                          </div>
                        </div>
                        <span class="q-inlineBlock qu-width--16 qu-height--16 qu-ml--tiny" width="16" height="16" style="
                            display: inline-block;
                            flex-shrink: 0;
                            line-height: 16px;
                          ">
                          <el-icon size="16">
                            <ArrowDown />
                          </el-icon>
                        </span>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="q-flex qu-px--medium qu-mt--tiny qu-mb--medium">
            <PlanBtn text="Create a space" icon="circlePlus" class="qu-mr--small" />
            <PlanBtn text="Discover Spaces" icon="compass" class="qu-mr--small" />
          </div>
          <div>
            <router-link to="#"
              class="q-box qu-cursor--pointer qu-display--block qu-hover--textDecoration--none b2c1r2a puppeteer_test_link">
              <div
                class="q-box qu-pl--medium qu-pr--medium qu-borderBottom qu-hover--bg--darken qu-tapHighlight--none qu-display--flex qu-alignItems--center"
                style="position: relative">
                <div class="q-flex qu-alignItems--center qu-py--small qu-flex--auto qu-overflow--hidden">
                  <div class="q-box qu-flex--none qu-display--inline-flex qu-mr--small">
                    <div class="q-relative qu-display--flex" style="position: relative">
                      <div class="q-inlineFlex">
                        <div class="q-box qu-display--inline-flex" style="z-index: 0">
                          <div class="q-box qu-display--inline-flex">
                            <div class="q-relative qu-display--inline-flex puppeteer_popper_reference"
                              style="position: relative">
                              <div
                                class="q-click-wrapper c1nud10e qu-display--inline-flex qu-tapHighlight--white qu-cursor--pointer"
                                aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                  font: inherit;
                                  padding: 0px;
                                  color: inherit;
                                  text-align: inherit;
                                ">
                                <div class="q-inlineFlex qu-flex--none" style="position: relative">
                                  <div class="q-inlineFlex" style="position: relative">
                                    <div class="q-inlineFlex qu-overflow--hidden qu-borderRadius--squircle"
                                      style="position: relative">
                                      <div class="q-box qu-borderRadius--squircle"
                                        style="position: absolute; inset: 1px"></div>
                                      <img
                                        class="q-image qu-display--block qu-size--24 qu-minWidth--24 qu-bg--white__ignore_dark_mode"
                                        src="@/assets/ans_frontend_1.png" size="24" style="
                                          max-width: 100%;
                                          position: relative;
                                        " />
                                      <div class="q-box qu-borderRadius--squircle qu-borderAll qu-borderColor--darken"
                                        style="position: absolute; inset: 0px"></div>
                                      <div
                                        class="q-absolute qu-fullX qu-fullY qu-borderAll qu-borderColor--darken qu-borderRadius--squircle avlofet"
                                        style="position: absolute; z-index: 1"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="q-box qu-flex--auto qu-overflow--hidden">
                    <div class="q-text qu-color--gray_dark">
                      <div class="q-flex qu-alignItems--center qu-flexWrap--wrap">
                        <span class="q-box qu-display--inline qu-mr--small">
                          <div class="q-inlineFlex">
                            <span class="q-text"><span
                                class="q-text qu-dynamicFontSize--small qu-bold puppeteer_test_tribe_name"><span><span>Qiu's
                                    Space 1</span></span></span></span>
                          </div>
                        </span>
                        <div
                          class="q-inlineFlex qu-px--small qu-py--tiny qu-color--gray qu-borderRadius--small qu-whiteSpace--nowrap qu-alignItems--center"
                          style="background-color: rgba(0, 0, 1, 0.03)">
                          <span class="q-inlineBlock qu-width--14 qu-height--14 qu-mr--tiny" width="14" height="14"
                            style="
                              display: inline-block;
                              flex-shrink: 0;
                              line-height: 14px;
                              margin-left: -2px;
                            "><span class="c8lvhxo c1qi64n3 c13dhsxm" style="
                                width: 14px;
                                height: 14px;
                                --strokeColor: var(--q-colors-text-gray);
                                --fillColor: var(--q-colors-text-gray);
                                --strokeWidth: 2.1;
                              ">
                              <img src="@/assets/svg/compass.svg"></img>
                              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path
                                  d="M12 3.5c.779 1.167 1.779 2 3 2.5s2.555.333 4-.5v9a7.856 7.856 0 0 1-2.5 3.5c-1.167.945-2.667 1.778-4.5 2.5-1.833-.722-3.333-1.555-4.5-2.5A7.856 7.856 0 0 1 5 14.5v-9c1.549.8 2.882.967 4 .5 1.118-.467 2.118-1.3 3-2.5Zm-7 9.781 14-7.525M7 17.441 18.655 11"
                                  class="icon_svg-stroke icon_svg-fill" stroke="#666" stroke-width="1.5" fill="none"
                                  fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg></span></span>
                          <div class="q-text qu-dynamicFontSize--upcase_header qu-fontWeight--medium qu-uppercase">
                            Admin
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="q-box qu-flex--none qu-display--inline-flex qu-ml--medium" style="margin-top: 0px"></div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="q-box" style="padding-top: 74px; margin-top: -50px">
          <div class="q-box qu-mr--n_small">
            <div class="q-box">
              <div
                class="q-text qu-dynamicFontSize--xlarge qu-fontWeight--bold qu-color--gray_dark_dim qu-passColorToLinks qu-lineHeight--regular qu-wordBreak--break-word">
                <span><span class="c1tjc3o4">Discover Spaces</span></span>
              </div>
            </div>
            <div class="q-box qu-mb--medium">
              <div class="q-flex qu-mt--small qu-mb--medium qu-justifyContent--space-between qu-alignItems--center">
                <div class="q-box qu-pt--small qu-pb--small" style="background-color: transparent">
                  <div class="q-flex qu-alignItems--center">
                    <div class="q-box" style="flex: 1 1 0%">
                      <div class="q-text qu-dynamicFontSize--regular qu-medium qu-color--gray_dark qu-passColorToLinks">
                        Spaces you might like
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="q-box">
                <div>
                  <div class="q-flex qu-flexWrap--wrap">
                    <div v-for="space in youLikes" :key="space.id">
                      <li
                        class="q-click-wrapper c1nud10e c1do4mvu qu-borderAll qu-flex--none qu-borderRadius--medium qu-mr--small qu-mb--small qu-display--inline-block qu-bg--raised qu-tapHighlight--white qu-cursor--pointer qu-hover--borderColor--gray_medium"
                        height="236" width="171.5px" tabindex="0" style="
                          font: inherit;
                          padding: 0px;
                          transition-property: opacity;
                          transition-duration: 180ms;
                          transition-timing-function: ease-in-out;
                          position: relative;
                          height: 236px;
                          list-style: none;
                          width: 171.5px;
                          color: inherit;
                          text-align: inherit;
                        ">
                        <div class="q-flex qu-flexDirection--column qu-textAlign--center" height="100%"
                          style="height: 100%">
                          <div class="q-box sc-eCYdqJ eFpPmh qu-bg--gray_ultralight" height="50px" :style="{
                              'background-image': 'url(' + space.image + ')',
                              'border-top-left-radius': '9px',
                              'border-top-right-radius': '9px',
                              height: '50px',
                              'box-shadow': 'rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset',
                              'transition-property': 'background-image',
                              'transition-duration': '180ms',
                              'transition-timing-function': 'ease-in-out',
                              'background-position': 'center center',
                              'background-size': 'cover',
                              'background-repeat': 'no-repeat'
                            }"></div>
                          <div class="q-box" style="margin-top: -20px">
                            <div class="q-inlineFlex" style="-webkit-tap-highlight-color: transparent">
                              <div class="q-box qu-display--inline-flex" style="z-index: 0">
                                <div class="q-box qu-display--inline-flex">
                                  <div class="q-relative qu-display--inline-flex puppeteer_popper_reference"
                                    style="position: relative">
                                    <div
                                      class="q-click-wrapper c1nud10e qu-display--inline-flex qu-tapHighlight--white qu-cursor--pointer"
                                      aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                        font: inherit;
                                        padding: 0px;
                                        color: inherit;
                                        text-align: inherit;
                                      ">
                                      <div class="q-inlineFlex qu-flex--none" style="position: relative">
                                        <div class="q-inlineFlex" style="position: relative">
                                          <div class="q-inlineFlex qu-overflow--hidden qu-borderRadius--squircle" style="
                                              box-shadow: rgb(255, 255, 255) 0px
                                                0px 0px 2px;
                                              position: relative;
                                            ">
                                            <div class="q-box qu-borderRadius--squircle" style="
                                                position: absolute;
                                                inset: 1px;
                                              "></div>
                                            <img
                                              class="q-image qu-display--block qu-size--40 qu-minWidth--40 qu-bg--white__ignore_dark_mode"
                                              :src="space.avatar" :alt="'Icon for ' + space.title" style="
                                                max-width: 100%;
                                                position: relative;
                                              " />
                                            <div
                                              class="q-box qu-borderRadius--squircle qu-borderAll qu-borderColor--darken be4t7km"
                                              style="
                                                position: absolute;
                                                inset: 0px;
                                              "></div>
                                            <div
                                              class="q-absolute qu-fullX qu-fullY qu-borderAll qu-borderColor--darken qu-borderRadius--squircle avlofet"
                                              style="
                                                position: absolute;
                                                z-index: 1;
                                              "></div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="q-box qu-pt--tiny qu-px--small qu-pb--small"
                            style="min-height: 58px; flex-grow: 1">
                            <div class="q-text qu-dynamicFontSize--small qu-bold qu-mb--tiny">
                              <div class="q-box qu-display--inline-block" style="z-index: 0">
                                <div class="q-box qu-display--inline-block">
                                  <div class="q-relative qu-display--inline-block puppeteer_popper_reference"
                                    style="position: relative">
                                    <div
                                      class="q-click-wrapper c1nud10e qu-display--inline-block qu-tapHighlight--white qu-cursor--pointer"
                                      aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                        font: inherit;
                                        padding: 0px;
                                        color: inherit;
                                        text-align: inherit;
                                      ">
                                      <a class="q-box qu-color--gray_dark qu-cursor--pointer qu-hover--textDecoration--underline b2c1r2a puppeteer_test_link"
                                        href="#" target="_blank" style="
                                          -webkit-tap-highlight-color: transparent;
                                          border-radius: inherit;
                                        "><span class="q-text"><span
                                            class="q-text puppeteer_test_tribe_name"><span><span>{{ space.title
                                                }}</span></span></span></span></a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="q-text qu-dynamicFontSize--small qu-truncateLines--4 qu-passColorToLinks">
                              <div class="q-text qu-dynamicFontSize--small qu-display--inline">
                                {{ space.description }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </div>
                  </div>
                  <div
                    class="q-click-wrapper c1nud10e qu-px--large qu-height--40 qu-display--block qu-color--gray qu-tapHighlight--none qu-textAlign--center qu-cursor--pointer qu-hover--bg--darken qu-hover--color--gray_dark"
                    height="40" width="100%" tabindex="0" style="font: inherit; padding: 0px; width: 100%">
                    <div class="q-flex qu-alignItems--center qu-justifyContent--center" height="100%"
                      style="height: 100%" @click="handleViewMore('like')">
                      <span class="q-text qu-dynamicFontSize--button">View more</span><span
                        class="q-inlineBlock qu-width--16 qu-height--16 qu-ml--tiny" width="16" height="16" style="
                          display: inline-block;
                          flex-shrink: 0;
                          line-height: 16px;
                        "><span class="c8lvhxo c1qi64n3 c13dhsxm" style="
                            width: 16px;
                            height: 16px;
                            --strokeColor: var(--q-colors-text-gray);
                            --fillColor: var(--q-colors-text-gray);
                            --strokeWidth: 2.1;
                          "><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="m5 8.5 7 7 7.005-7" class="icon_svg-stroke" stroke="#666" stroke-width="1.5"
                              fill="none" stroke-linecap="round"></path>
                          </svg></span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="q-box qu-mb--medium" v-for="item in types" :key="item.value">
                <div class="q-flex qu-mt--small qu-mb--medium qu-justifyContent--space-between qu-alignItems--center">
                  <div class="q-box qu-pt--small qu-pb--small" style="background-color: transparent">
                    <div class="q-flex qu-alignItems--center">
                      <div class="q-box" style="flex: 1 1 0%">
                        <div
                          class="q-text qu-dynamicFontSize--regular qu-medium qu-color--gray_dark qu-passColorToLinks">
                          <span class="q-text qu-wordBreak--break-word"><span><span>{{ item.name }}</span></span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="q-box">
                  <div class="q-flex qu-flexWrap--wrap">
                    <div v-for="space in item.spaces" :key="space.id">
                      <li
                        class="q-click-wrapper c1nud10e c1do4mvu qu-borderAll qu-flex--none qu-borderRadius--medium qu-mr--small qu-mb--small qu-display--inline-block qu-bg--raised qu-tapHighlight--white qu-cursor--pointer qu-hover--borderColor--gray_medium"
                        height="236" width="171.5px" tabindex="0" style="
                          font: inherit;
                          padding: 0px;
                          transition-property: opacity;
                          transition-duration: 180ms;
                          transition-timing-function: ease-in-out;
                          position: relative;
                          height: 236px;
                          list-style: none;
                          width: 171.5px;
                          color: inherit;
                          text-align: inherit;
                        ">
                        <div class="q-flex qu-flexDirection--column qu-textAlign--center" height="100%"
                          style="height: 100%">
                          <div class="q-box sc-eCYdqJ eFpPmh qu-bg--gray_ultralight" height="50px" :style="{
                              'background-image': 'url(' + space.image + ')',
                              'border-top-left-radius': '9px',
                              'border-top-right-radius': '9px',
                              height: '50px',
                              'box-shadow': 'rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset',
                              'transition-property': 'background-image',
                              'transition-duration': '180ms',
                              'transition-timing-function': 'ease-in-out',
                              'background-position': 'center center',
                              'background-size': 'cover',
                              'background-repeat': 'no-repeat'
                            }"></div>
                          <div class="q-box" style="margin-top: -20px">
                            <div class="q-inlineFlex" style="-webkit-tap-highlight-color: transparent">
                              <div class="q-box qu-display--inline-flex" style="z-index: 0">
                                <div class="q-box qu-display--inline-flex">
                                  <div class="q-relative qu-display--inline-flex puppeteer_popper_reference"
                                    style="position: relative">
                                    <div
                                      class="q-click-wrapper c1nud10e qu-display--inline-flex qu-tapHighlight--white qu-cursor--pointer"
                                      aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                        font: inherit;
                                        padding: 0px;
                                        color: inherit;
                                        text-align: inherit;
                                      ">
                                      <div class="q-inlineFlex qu-flex--none" style="position: relative">
                                        <div class="q-inlineFlex" style="position: relative">
                                          <div class="q-inlineFlex qu-overflow--hidden qu-borderRadius--squircle" style="
                                              box-shadow: rgb(255, 255, 255) 0px
                                                0px 0px 2px;
                                              position: relative;
                                            ">
                                            <div class="q-box qu-borderRadius--squircle" style="
                                                position: absolute;
                                                inset: 1px;
                                              "></div>
                                            <img
                                              class="q-image qu-display--block qu-size--40 qu-minWidth--40 qu-bg--white__ignore_dark_mode"
                                              :src="space.avatar" :alt="'Icon for ' + space.title" style="
                                                max-width: 100%;
                                                position: relative;
                                              " />
                                            <div
                                              class="q-box qu-borderRadius--squircle qu-borderAll qu-borderColor--darken be4t7km"
                                              style="
                                                position: absolute;
                                                inset: 0px;
                                              "></div>
                                            <div
                                              class="q-absolute qu-fullX qu-fullY qu-borderAll qu-borderColor--darken qu-borderRadius--squircle avlofet"
                                              style="
                                                position: absolute;
                                                z-index: 1;
                                              "></div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="q-box qu-pt--tiny qu-px--small qu-pb--small"
                            style="min-height: 58px; flex-grow: 1">
                            <div class="q-text qu-dynamicFontSize--small qu-bold qu-mb--tiny">
                              <div class="q-box qu-display--inline-block" style="z-index: 0">
                                <div class="q-box qu-display--inline-block">
                                  <div class="q-relative qu-display--inline-block puppeteer_popper_reference"
                                    style="position: relative">
                                    <div
                                      class="q-click-wrapper c1nud10e qu-display--inline-block qu-tapHighlight--white qu-cursor--pointer"
                                      aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                        font: inherit;
                                        padding: 0px;
                                        color: inherit;
                                        text-align: inherit;
                                      ">
                                      <a class="q-box qu-color--gray_dark qu-cursor--pointer qu-hover--textDecoration--underline b2c1r2a puppeteer_test_link"
                                        href="#" target="_blank" style="
                                          -webkit-tap-highlight-color: transparent;
                                          border-radius: inherit;
                                        "><span class="q-text"><span
                                            class="q-text puppeteer_test_tribe_name"><span><span>{{ space.title
                                                }}</span></span></span></span></a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="q-text qu-dynamicFontSize--small qu-truncateLines--4 qu-passColorToLinks">
                              <div class="q-text qu-dynamicFontSize--small qu-display--inline">
                                {{ space.description }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </div>
                  </div>
                </div>
                <div class="q-box">
                  <div
                    class="q-click-wrapper c1nud10e qu-px--large qu-height--40 qu-display--block qu-color--gray qu-tapHighlight--none qu-textAlign--center qu-cursor--pointer qu-hover--bg--darken qu-hover--color--gray_dark"
                    height="40" width="100%" tabindex="0" style="font: inherit; padding: 0px; width: 100%">
                    <div class="q-flex qu-alignItems--center qu-justifyContent--center" height="100%"
                      style="height: 100%">
                      <span class="q-text qu-dynamicFontSize--button">
                        <div class="q-text">View more</div>
                      </span><span class="q-inlineBlock qu-width--16 qu-height--16 qu-ml--tiny" width="16" height="16"
                        style="
                          display: inline-block;
                          flex-shrink: 0;
                          line-height: 16px;
                        "><span class="c8lvhxo c1qi64n3 c13dhsxm" style="
                            width: 16px;
                            height: 16px;
                            --strokeColor: var(--q-colors-text-gray);
                            --fillColor: var(--q-colors-text-gray);
                            --strokeWidth: 2.1;
                          "><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="m5 8.5 7 7 7.005-7" class="icon_svg-stroke" stroke="#666" stroke-width="1.5"
                              fill="none" stroke-linecap="round"></path>
                          </svg></span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="q-box" width="356" style="width: 356px; margin-left: 30px">
        <div class="q-box false" height="100%" style="
            height: 100%;
            --page-contents-layout-scroll-bar-color: rgba(0, 0, 0, 0.1);
          ">
          <div
            class="q-box qu-borderAll qu-borderRadius--small qu-borderTopRightRadius--small qu-borderTopLeftRadius--small qu-borderBottomRightRadius--small qu-borderBottomLeftRadius--small qu-borderColor--raised qu-boxShadow--small qu-bg--raised">
            <div class="q-box qu-borderBottom qu-pt--small qu-pb--small" style="
                padding-left: 16px;
                padding-right: 16px;
                background-color: transparent;
              ">
              <div class="q-flex qu-alignItems--center">
                <div class="q-box" style="flex: 1 1 0%">
                  <div class="q-text qu-dynamicFontSize--regular qu-medium qu-color--gray_dark qu-passColorToLinks">
                    Pending Invites
                  </div>
                </div>
              </div>
            </div>
            <div class="q-box" style="position: relative">
              <!-- <div
                class="q-box qu-pt--small qu-pb--small qu-bg--raised"
                style="padding-left: 16px; padding-right: 16px"
              >
                <div class="q-flex qu-alignItems--center">
                  <div class="q-box" style="flex: 1 1 0%">
                    <div
                      class="q-text qu-dynamicFontSize--small qu-color--gray_dark qu-passColorToLinks"
                    >
                      From people you don't follow
                    </div>
                  </div>
                </div>
              </div> -->
              <div class="q-box qu-px--medium qu-py--small" v-for="item in invitedList" :key="item.id">
                <div>
                  <div class="q-flex">
                    <div class="q-box">
                      <div class="q-inlineFlex qu-mr--small">
                        <div class="q-box qu-display--inline-flex" style="z-index: 0">
                          <div class="q-box qu-display--inline-flex">
                            <div class="q-relative qu-display--inline-flex puppeteer_popper_reference"
                              style="position: relative">
                              <div
                                class="q-click-wrapper c1nud10e qu-display--inline-flex qu-tapHighlight--white qu-cursor--pointer"
                                aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                  font: inherit;
                                  padding: 0px;
                                  color: inherit;
                                  text-align: inherit;
                                ">
                                <a class="q-box qu-display--inline-flex qu-cursor--pointer qu-hover--textDecoration--underline b2c1r2a puppeteer_test_link"
                                  href="#" target="_blank" style="border-radius: inherit">
                                  <div
                                    class="q-click-wrapper c1nud10e qu-display--inline-flex qu-tapHighlight--white qu-cursor--pointer qu-hover--textDecoration--underline"
                                    tabindex="0" style="
                                      font: inherit;
                                      padding: 0px;
                                      color: inherit;
                                      text-align: inherit;
                                    ">
                                    <div class="q-inlineFlex qu-flex--none" style="position: relative">
                                      <div class="q-inlineFlex" style="position: relative">
                                        <div class="q-inlineFlex qu-overflow--hidden qu-borderRadius--squircle"
                                          style="position: relative">
                                          <div class="q-box qu-borderRadius--squircle" style="
                                              position: absolute;
                                              inset: 1px;
                                            "></div>
                                          <img
                                            class="q-image qu-display--block qu-size--32 qu-minWidth--32 qu-bg--white__ignore_dark_mode"
                                            :src="item.icon" size="32" alt="" style="
                                              max-width: 100%;
                                              position: relative;
                                            " />
                                          <div
                                            class="q-box qu-borderRadius--squircle qu-borderAll qu-borderColor--darken be4t7km"
                                            style="
                                              position: absolute;
                                              inset: 0px;
                                            "></div>
                                          <div
                                            class="q-absolute qu-fullX qu-fullY qu-borderAll qu-borderColor--darken qu-borderRadius--squircle avlofet"
                                            style="
                                              position: absolute;
                                              z-index: 1;
                                            "></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="q-box">
                      <div class="q-text qu-dynamicFontSize--small qu-bold qu-passColorToLinks">
                        <div class="q-box qu-display--inline-block" style="z-index: 0">
                          <div class="q-box qu-display--inline-block">
                            <div class="q-relative qu-display--inline-block puppeteer_popper_reference"
                              style="position: relative">
                              <div
                                class="q-click-wrapper c1nud10e qu-display--inline-block qu-tapHighlight--white qu-cursor--pointer"
                                aria-expanded="false" aria-haspopup="dialog" tabindex="0" style="
                                  font: inherit;
                                  padding: 0px;
                                  color: inherit;
                                  text-align: inherit;
                                ">
                                <a class="q-box qu-color--gray_dark qu-cursor--pointer qu-hover--textDecoration--underline b2c1r2a puppeteer_test_link"
                                  href="#" target="_blank" style="border-radius: inherit"><span class="q-text"><span
                                      class="q-text puppeteer_test_tribe_name"><span><span>{{ item.title
                                          }}</span></span></span></span></a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="q-text qu-dynamicFontSize--small qu-color--gray">
                        Invited as a follower by
                        <div class="q-inlineFlex qu-alignItems--center qu-wordBreak--break-word">
                          <span><span>{{ item.from }}</span></span>
                        </div>
                        .
                      </div>
                      <div class="q-flex qu-mt--small">
                        <PlanBtn text="Accept" />
                        <div class="q-box qu-mr--small"></div>
                        <div class="q-box">
                          <TextBtn text="Decline" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="q-box" style="position: relative;" v-if="invitedList.length == 0">
                <div
                  class="q-flex qu-px--small qu-py--tiny qu-alignItems--center qu-justifyContent--center qu-textAlign--center"
                  height="100%" style=" display: flex; background-color: transparent; height: 100%;">
                  <div class="q-box qu-py--large" style=""><span
                      class="q-inlineBlock qu-width--24 qu-height--24 qu-mb--small" width="24" height="24"
                      style=" display: inline-block; flex-shrink: 0; line-height: 24px;"><span
                        class="c8lvhxo c1qi64n3 c13dhsxm"
                        style="width: 24px; height: 24px; --strokeColor: var(--q-colors-text-gray_light); --fillColor: var(--q-colors-text-gray_light); --strokeWidth: 1.5;"><svg
                          width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                          <g class="icon_svg-stroke" stroke="#666" stroke-width="1.5" fill="none" fill-rule="evenodd"
                            stroke-linejoin="round">
                            <path d="M4.5 6.5h15v12h-15z"></path>
                            <path stroke-linecap="round" d="M4.5 7.5 12 14l7.5-6.5"></path>
                          </g>
                        </svg></span></span>
                    <div class="q-text qu-dynamicFontSize--small qu-color--gray_light" style=" margin-bottom: 0px;">No
                      invites</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import PlanBtn from "./components/button/plan-btn.vue"
import TextBtn from "./components/button/text-btn.vue"
import Updates from "@/assets/updates.jpeg"

import { ref, onMounted, defineOptions } from "vue"

const youLikes = ref([])

const types = ref([
  {
    name: "Chinese (language)",
    value: 1
  },
  {
    name: "Movies",
    value: 2
  }
])

const moreList = ref([
  {
    id: 9,
    title: "Addiction Central",
    description: "A space dedicated to ALL ADDICTIONS and everything related.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1574469-320x64-zlkaoysvjsemwkxyagnzjtruqwmjoscq.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1574469-100-easujfggbijztbrkdgphcohmglgsqobs.jpeg"
  },
  {
    id: 10,
    title: "German Learners' Lounge",
    description: "A place for German learners and teachers to share resources",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-637-320x64-dyvbtqsltabxnhwcdwjyhziumgtdgutt.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-637-100-trrxsagnrrkcqbczbrrflwudmosyfzxi.jpeg"
  },
  {
    id: 11,
    title: "Stoicism",
    description: "A philosophy designed to make you a wiser, happier, more resilient person.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1576566-320x64-fxqbwkzvbgzqekshdoyrnkungvdnxdxd.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1576566-100-gifztrprmeqwgqrorbjommwspdgpjfxq.jpeg"
  },
  {
    id: 12,
    title: "Psychology and Psychopathology",
    description: "Share & Learn about mental health, behavioral/mental disorders and psychology",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1909789-320x64-qdcskdptokxnemzzrnrgkocrnfscffjh.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1909789-100-qllqyzrolxoefhibueveoyttwgkiizyd.jpeg"
  },
  {
    id: 13,
    title: "Travel Stories",
    description: "Tales of travel from around the world",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-2145-320x64-zlhjypztskpbcnvqgdlkznqufdywboov.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-2145-100-hzpjkkxnjojfdpeetftzptietbvuobks.jpeg"
  },
  {
    id: 14,
    title: "Dark Psychology Facts",
    description: "Dark Side of Human Consciousness Concept",
    image: "https://qsf.cf2.quoracdn.net/-4-ans_frontend_assets.images.tribes.defaults.space_banner_blue.png-26-4eaf49a49fb008b5.png",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-2354453-100-ociqlkxmvpbrdphpgmfcwuceebnbuzux.jpeg"
  },
  {
    id: 15,
    title: "Human Mind (Psychology)",
    description: "Will share everything about Human mind and thinking..",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-6297203-320x64-dvkerzqywsuehgmimqyiwpfdxyryfgmb.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-6297203-100-ewgjbfmbeqdbzphusfypeqkxgdvezclh.jpeg"
  },
  {
    id: 16,
    title: "Let's Talk BTS",
    description: "Anything BTS, Sir.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-2037065-320x64-qmkxvpgabgsqxseadyedfaycrlwrtcuq.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-2037065-100-xcsstqaahajdqcthuzaoxtckqxvinxul.jpeg"
  }
])

const invitedList = ref([
  {
    id: 1,
    title: "Quora Product Updates",
    from: "Quora",
    icon: Updates
  }
])
function getYouLikes() {
  youLikes.value = [
  {
    id: 1,
    title: "Natury Dark'LOVE",
    description: "💕 Follow,thank you! 💕 To become contributor send request.💕",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-3925227-320x64-ljhcyezhsqfsyswajuwlrqrtxmanmcyx.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-3925227-100-dbxksukuufjjpsnjtzxfqjzluyvttdat.jpeg"
  },
  {
    id: 2,
    title: "United States of America",
    description: "News, politics, health and discussions about the United States of America (USA)",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1587296-320x64-dymjyguordmthoeflkvxvolgwlpimskh.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1587296-100-kuxgpzpvuqgxjfmxzxrmnnqfzsmunbmx.jpeg"
  },
  {
    id: 3,
    title: "Conservative Memes",
    description: "This is a place to make fun of liberals.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1958779-320x64-ymojdvqirtkjssmoepgefqczhwhdachc.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1958779-100-nlghyfkrpoldacjjkhhfnmjubcdnxpoz.jpeg"
  },
  {
    id: 4,
    title: "Earn Money Online Free in 2025 ❤️🔥",
    description: "Earn Money Online Free in 2025! with Mobile 100%",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-7386630-320x64-swhxpvlcekfupqqgpuwhtkbmavllipxe.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-7386630-100-dcbwnbkdxsxtrhpeuzrazhtadcbtyuer.jpeg"
  },
  {
    id: 5,
    title: "Make Money Online with Mobile in 2025 🔥🔥",
    description: "Earn Online Using Your Phone! 100%",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-7386615-320x64-ceeqygbbsgjaxfxpdmsajntyuzmemdas.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-7386615-100-oywyowqqkxysufaibymamixtwqbpoatz.jpeg"
  },
  {
    id: 6,
    title: "The United Kingdom (UK)",
    description: "News, politics, health and discussions about United Kingdom (UK) / Great Britain",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1587297-320x64-xlpcgftyhmmdnfhmrsbfnreqahvoqnsl.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-1587297-100-onmssdwuwcktqlhgjlelicxedydwzymh.jpeg"
  },
  {
    id: 7,
    title: "Meet woman nearby // Dating",
    description: "Chat and make friends with nearby housewives and attractive girls for dating.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-7817554-320x64-sfylytmlohdehpqlonjjxaxlyquuacwq.jpeg",
    avatar: "https://qph.cf2.quoracdn.net/main-thumb-ti-7817554-100-mlxnnvjoyfrzfrbggbvwstucdouimqrp.jpeg"
  },
  {
    id: 8,
    title: "Vocabulary",
    description: "A space for discussing vocabulary, word origins, usage, and language learning tips.",
    image: "https://qph.cf2.quoracdn.net/main-custom-tc-1579093-320x64-jpgscoezpsqbxjcvwxfglmwdshhtgtvr.jpeg",
    avatar: "https://qsf.cf2.quoracdn.net/-4-ans_frontend_assets.images.tribes.defaults.space_icon_gray.png-26-a461963c75474740.png"
  }
]
}

function getTypesList(type) {
  return moreList.value
}

function handleViewMore(name) {
  if (name === 'like') {
    youLikes.value = [...youLikes.value, ...moreList.value]
  }
}

onMounted(() => {
  getYouLikes()
  types.value.forEach(item => {
    item.spaces = getTypesList(item.value)
  })
})

defineOptions({
  name: "Spaces"
})
</script>

<style></style>
